<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=0.5,maximum-scale=0.5"/>
    <title>目标检测系统</title>
    <link rel="stylesheet" type="text/css" href="../static/css/mytest.css">
    <link rel="stylesheet" href="/static/css/jquery.mloading.css">
</head>
    <body style="background: url(/static/img/background.jpg); background-size: cover;">
    <div style="margin:0 auto;width:100%">
        <div style="color: white;text-align: center;">
            <h2>基于计算机视觉的数字化目标检测系统</h2>
            <h5>解决传统的目标检测计数问题，能够快速的对行人、机动车、监控摄像头进行检测</h5>
        </div>
        <div style="width: 75%;background-color: rgba(255,255,255, 0.4);height: 435px;margin: 0 auto;border-radius: 20px; ">
            <form role="form" action="/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div style="max-height: 440px;text-align: center">
                    <div id="imgPreview">
                        <div id="prompt3">
                            <br>
                            <i class="aui-iconfont aui-icon-plus"></i>
                            <!--AUI框架中的图标-->
    {#                        <input id="image-upload" name="upload" type="file" accept="image/png,image/bmp,image/jpg,image/jpeg" id="file" class="filepath" onchange="changepic(this)">上传图片#}
                            <input name="avatar" type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG" style="border:0;cursor: pointer">
                            {% if a == 1 %}
                                <img src="{{ pic_path }}" id="img4" style="margin-top: -370px;">
                            {% else %}
                                <h3 style="margin-top: -190px;">
                                    点击上传
                                 </h3>
                            {% endif %}

                        </div>
                            <img src="#" id="img3">

                        <div id="error-tip"></div>


                    </div>
                    <div style="height: 150px;background-color: rgba(255,255,255, 0.6); border-radius: 20px;width: auto;" >
                            <div style="padding-top: 50px;padding-left:8px">
                                <button style="float: left;" id="btn1" onclick="error()">开始检测</button>
                            </div>
                            <div style="float: left;text-align: center;width: 600px;margin-top: -50px">
                                <h4>检测结果: {{ r_log1 | safe}}<br>
                                    {{ r_log2 | safe }}<br>
                                    {{ r_log4 |safe }} {{ r_log3 | safe }}
                                </h4>
                            </div>
                            <div style="float: right;">
                                <a href="../static/uploadfiles/pre_complete.jpg" download="test_complete.jpg">
                                    <h3 style="margin: 15px 30px ;">下载结果</h3>
                                </a>
                            </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/mytest.js"></script>
    <script src="/static/js/jquery.mloading.js"></script>
<script>
    function error() {
        $(function () {
            $("body").mLoading();
            document.getElementById('btn1').innerHTML = '正在上传并处理中...';
        });
    };
</script>
</body>
</html>
